<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ page import="net.tanesha.recaptcha.ReCaptcha" %>
<%@ page import="net.tanesha.recaptcha.ReCaptchaFactory" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Help me find a place to rent in Makati, Manila, Taguig, Quezon City, Cebu, etc.</title>       
        <style>
            a {color:#404042;text-decoration:none;}      /* unvisited link */
            a:visited {color:#404042;}  /* visited link */
            a:hover {color:#404042;}  /* mouse over link */
            a:active {color:#404042;}  /* selected link */
            @font-face
            {
            font-family: avant;
            src: url('${model.props.appPath}/fonts/avangmi-webfont.ttf');
            }
        </style>
        
        <script type="text/javascript" src="${model.props.appPath}/js/jquery/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="${model.props.appPath}/js/token/jquery.tokeninput.js"></script> 
        <script type="text/javascript" src="${model.props.appPath}/js/google/analytics.js"></script>
        <script type="text/javascript" src="${model.props.appPath}/js/block/jquery.blockUI.js"></script>
        
        <script type="text/javascript">            
            $(function() {
                $("#table-leads tr:even").css("background-color", "#ececec");
                initSubmitForm();
                
            });
            function initSubmitForm() {
                try {
                    $(function() {
                        $('.ghost').each(function(index) {// Adds the Ghost effect on textbox
                            if ($(this).val() === "" || $(this).val() === $(this).attr("title")) {
                                $(this).attr("value", $(this).attr("title")).css({"color": "#999"});
                            }
                        });
                        $('.ghost').on("focusin", function() {
                            if ($(this).val() === $(this).attr("title")) {
                                $(this).val("").css({"color": "#000000"});//Clear text and return normal color
                            }
                        }).focusout(function() {
                            if ($(this).val() === "") {//Nothing has changed
                                $(this).val($(this).attr("title")).css({"color": "#999"});//return back to ghost state
                            }
                        });
                    });
                } catch (e) {
                    alert(e)
                }
            }            
            function submitLeadForm() {
                var name = $("#text-lead-name").val();
                var email = $("#text-lead-email").val();
                var phone = $("#text-lead-phone").val();
                
                var term = $("#listing-rentalTerm").val();
                var type = $("#listing-propertyType").val();
                var city = $("#listing-city").val();
                var bedsMin = $("#select-numBedroomsLow").val();
                var priceMin = $("#select-longMonthRateLow").val();
                var priceMax = $("#select-longMonthRateHigh").val();
                                       
                var desc = $("#text-lead-area").val();
                                                                
                if (name == 'Your name') {
                    name = '';
                }
                if (email == 'So we can contact you') {
                    email = '';
                }                
                if (phone == 'Can be your mobile number or landline') {
                    phone = '';
                }
                if (term == 'N/A') {
                    term = '';
                }
                if (type == 'N/A') {
                    type = '';
                }
                if (city == 'N/A') {
                    city = '';
                }
                if (desc == 'ie. I want one with a balcony and in a quiet neighborhood') {
                    desc = '';
                }
                try {
                    if (!name || !email || !term || !type || !city) {
                        alert("Make sure you fill out all the required fields");                        
                    } 
                    else {        
                        $.blockUI({ message: "<div style='font-family: avant, Century Gothic, Calibri, Verdana; padding: 10px;'>Submitting your info ...</div>" });
                                                       
                        $.ajax({
                            type: 'POST',
                            url: "${model.props.appPath}/ws/lead.htm",
                            data: {
                                name: name,
                                email: email,
                                phone: phone,
                                term: term,
                                type: type,
                                city: city,
                                bedsMin: bedsMin,
                                priceMin: priceMin,
                                priceMax: priceMax,
                                description: desc,
                                a: 3,
                                recaptcha_challenge_field: $("input#recaptcha_challenge_field").val(),
                                recaptcha_response_field: $("input#recaptcha_response_field").val()
                            },
                            timeout: 200000,
                            success: function(data) {
                                $.unblockUI();
                                if (data.model.success) {
                                    alert("Success! We have recorded your details and hopefully we can help you find a place. Have a great day!");
                                    $("#text-lead-name").val("");
                                    $("#text-lead-email").val("");
                                    $("#text-lead-area").val("");
                                    $("#text-lead-type").val("");

                                    $("#text-lead-name").focusout();
                                    $("#text-lead-email").focusout();
                                    $("#text-lead-area").focusout();
                                    window.location="${model.props.appPath}/home.htm";
                                }    
                                else {
                                    alert("Oops! There we are having a problem saving your details. You can email us at team@rentpad.me instead.");
                                }
                                $("#submit-recaptcha").removeAttr('disabled');
                            }
                        });                        
                    }
                }
                catch (e) {
                    $.unblockUI();
                    //alert(e);
                }
            }            
        </script>
        
        <script>
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
            ga('create', 'UA-44197833-1', 'rentpad.com.ph');
            ga('send', 'pageview');
        </script>
        
        <script>            
            var RecaptchaOptions = {
                theme : 'clean',
                width : '800px'
            };
        </script>
        
    </head>

    <body style="text-align: center; background-color: #FAFAFA; color: #404042; font-family: avant, Century Gothic, Calibri, Verdana; padding: 0px; margin: 0px;">                

        <div style="margin-top: 0px; background-color: white;">

            <%@include file="header.jsp" %>

            <div style="width: 100%; text-align: center; font-family: avant, Century Gothic, Calibri, Verdana; color: #404042; background-color: white; background: url('${model.props.appPath}/img/content-bg-short.jpg'); background-repeat: repeat-x; display: block; position: relative; top: -2px;">

                <div style="width: 1000px; margin: 0 auto; text-align: center; border: 0px solid ">

                    <br>
                    <br>

                    <table cellpadding="5px" cellspacing="5px" style="font-size: 16px; width: 100%">
                        <tr>
                            <td align="left">
                                <h1>Can't find what you're looking for? </h1>
                                
                                <hr>
                                <br>
                                We can ask around for you. Just detail on the form below with what you need and we'll do our best to help you out. &nbsp; &#12484;
                                <br>  
                                <br>
                            </td>
                        </tr>
                        <tr>
                            <td style="background-color: #fafafa;">
                                <br>
                                <table cellpadding="5" cellspacing='5' style="padding-left: 50px;">

                                    <tr>
                                        <td align="left" style="width: 100px;">
                                            Name:
                                        </td>
                                        <td align="left">
                                            <input id="text-lead-name" type="text" style="font-size:16px; padding:9px; width:600px;" class="ghost" id="text-lead-email" title="Your name"/>
                                            &nbsp;<span style="color: #999">(required)</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left">
                                            Email:
                                        </td>
                                        <td align="left">
                                            <input id="text-lead-email" type="text" style="font-size:16px; padding:9px; width:600px;" class="ghost" id="text-lead-email" title="So we can contact you"/>
                                            &nbsp;<span style="color: #999">(required)</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left">
                                            Phone:
                                        </td>
                                        <td align="left">
                                            <input id="text-lead-phone" type="text" style="font-size:16px; padding:9px; width:600px;" class="ghost" id="text-lead-phone" title="Can be your mobile number or landline"/>
                                        </td>
                                    </tr>   
                                    
                                    <tr>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    
                                    <tr>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    
                                    <tr>
                                        <td align="left">Rental Term:</td>
                                        <td align="left">
                                            <select id="listing-rentalTerm" name="type" style="color:gray; font-size:16px; padding:9px; width:250px;">
                                                <option value="N/A" selected>-- Choose one --</option>
                                                <option value="Long term">Long term (6 months or more)</option>
                                                <option value="Short term">Short term (a few nights or weeks)</option>                                                
                                            </select>
                                            &nbsp;<span style="color: #999">(required)</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left">Property Type:</td>
                                        <td align="left">
                                            <select id="listing-propertyType" name="type" style="color:gray; font-size:16px; padding:9px; width:250px;">
                                                <option value="N/A" selected>-- Choose one --</option>
                                                <option value="Condominium" >Condominium</option>
                                                <option value="Apartment">Apartment</option>
                                                <option value="Townhouse">Townhouse</option>
                                                <option value="House">House</option>
                                                <option value="Room">Room</option>
                                            </select>
                                            &nbsp;<span style="color: #999">(required)</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left">City:</td>
                                        <td align="left">
                                            <select id="listing-city" name="city" style="color:gray; font-size:16px; padding:9px; width:250px;">
                                                <option value="N/A" selected>-- Choose one --</option>
                                                <option value="Makati">Makati</option>
                                                <option value="Taguig">Taguig</option>
                                                <option value="Mandaluyong">Mandaluyong</option>
                                                <option value="Pasig">Pasig</option>
                                                <option value="Quezon City">Quezon City</option>
                                                <option value="Manila">Manila</option>
                                                <option value="Pasay">Pasay</option>
                                                <option value="Paranaque">Paranaque</option>
                                                <option value="Muntinlupa">Muntinlupa</option>
                                                <option value="San Juan">San Juan</option>
                                                <option value="Cebu">Cebu</option>
                                            </select>
                                            &nbsp;<span style="color: #999">(required)</span>
                                        </td>
                                    </tr>
                                    
                                    <tr>
                                        <td align="left">
                                            Bedrooms
                                        </td>
                                        <td align="left">
                                            <select id="select-numBedroomsLow" name="bedsMin" style="color:gray; font-size:16px; padding:9px; width:250px;">
                                                <option value="N/A" selected>-- Choose one --</option>
                                                <option value="0">Studio</option>
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                <option value="999">Max</option>
                                            </select>     
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left">
                                            Price Range:
                                        </td>
                                        <td align="left">
                                            <table>
                                                <tr>
                                                    <td>
                                                        <select id="select-longMonthRateLow" style="color:gray; font-size:16px; padding:9px; width:250px;">
                                                            <option value="0" selected>-- Choose minimum price --</option>
                                                            <option value="1,000">&#8369; 1,000</option>
                                                            <option value="5,000">&#8369; 5,000</option>
                                                            <option value="10,000">&#8369; 10,000</option>
                                                            <option value="20,000">&#8369; 20,000</option>
                                                            <option value="30,000">&#8369; 30,000</option>
                                                            <option value="40,000">&#8369; 40,000</option>
                                                            <option value="50,000">&#8369; 50,000</option>
                                                            <option value="60,000">&#8369; 60,000</option>
                                                            <option value="70,000">&#8369; 70,000</option>
                                                            <option value="80,000">&#8369; 80,000</option>
                                                            <option value="90,000">&#8369; 90,000</option>
                                                            <option value="100,000">&#8369; 100,000</option>
                                                            <option value="150,000">&#8369; 150,000</option>
                                                            <option value="200,000">&#8369; 200,000</option>
                                                            <option value="300,000">&#8369; 300,000</option>
                                                            <option value="999,999">-- Choose maximum price --</option>
                                                        </select>
                                                    </td>
                                                    <td>
                                                        &nbsp;&nbsp;to&nbsp;&nbsp;
                                                    </td>
                                                    <td>                                                        
                                                        <select id="select-longMonthRateHigh" style="color:gray; font-size:16px; padding:9px; width:250px;">
                                                            <option value="0">-- Choose minimum price --</option>
                                                            <option value="1,000">&#8369; 1,000</option>
                                                            <option value="5,000">&#8369; 5,000</option>
                                                            <option value="10,000">&#8369; 10,000</option>
                                                            <option value="20,000">&#8369; 20,000</option>
                                                            <option value="30,000">&#8369; 30,000</option>
                                                            <option value="40,000">&#8369; 40,000</option>
                                                            <option value="50,000">&#8369; 50,000</option>
                                                            <option value="60,000">&#8369; 60,000</option>
                                                            <option value="70,000">&#8369; 70,000</option>
                                                            <option value="80,000">&#8369; 80,000</option>
                                                            <option value="90,000">&#8369; 90,000</option>
                                                            <option value="100,000">&#8369; 100,000</option>
                                                            <option value="150,000">&#8369; 150,000</option>
                                                            <option value="200,000">&#8369; 200,000</option>
                                                            <option value="300,000">&#8369; 300,000</option>
                                                            <option value="999,999" selected>-- Choose maximum price --</option>
                                                        </select> 
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                    
                                    
                                    <tr>
                                        <td><br></td>
                                        <td></td>
                                    </tr>
                                    
                                    <tr>
                                        <td align="left">
                                            Notes:&nbsp;
                                        </td>
                                        <td align="left">
                                            <input id="text-lead-area" type="text" style="font-size:16px; padding:9px; width:600px;" class="ghost" id="text-lead-email" title="ie. I want one with a balcony and in a quiet neighborhood"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td align="left">         
                                            <br><br>
                                            <span style="font-size: 13px;">Lastly, we just need to make sure you're human.</span>
                                            <br>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td align="left">                                            
                                            <%
                                              ReCaptcha c = ReCaptchaFactory.newReCaptcha("6LcJpegSAAAAAOa1UdcZkOxSbYRPAKeN9wHZdq3h", "6LcJpegSAAAAAJzGZN-OWFnq48drxH-vmu0zYHkE", false);
                                              out.print(c.createRecaptchaHtml(null, null));
                                            %>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>

                                        </td>
                                        <td align="right" style="">
                                            <Br>
                                            <input id="submit-recaptcha" type="button" value=" Submit Details " style="font-size:16px; padding:5px; margin-right: 250px; width: 200px;" onclick='submitLeadForm()'/>
                                            <br><br>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td align='right'>
                                Need help? Email <u>team@rentpad.me</u>
                            </td>
                        </tr>
                    </table>
                </div>

                <br><br>                

            </div>

            <div>                
                <%@include file="footer.jsp" %>
            </div>


        </div>

    </body>

</html>
